<template>
    <div>
        <Search ref="search" :fields="searchItem" :search="list"></Search>
        <!-- 功能按钮 -->
        <FunctionButton :permissions="{ insert: true }" :add="addRow"></FunctionButton>
        <el-table v-loading="fieldListLoading" :data="fieldList" :header-cell-style="headStyle" :cell-style="rowStyle" style="width: 100%">
            <el-table-column label="属性名称" prop="fieldName">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-input size="mini" v-model="scope.row.fieldName" placeholder="新建字段"/>
                    </span>
                    <span v-else>{{ scope.row.fieldName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="属性编码" prop="fieldCode">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-input size="mini" v-model="scope.row.fieldCode" />
                    </span>
                    <span v-else>{{ scope.row.fieldCode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="fieldType">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-select size="mini" v-model="scope.row.fieldType" placeholder="请选择" filterable @change="changeFieldType">
                            <el-option v-for="item in fieldTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <span v-else>{{ scope.row.fieldType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="长度" prop="fieldLength">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-input-number size="mini" v-model="scope.row.fieldLength" controls-position="right" :min="0" :max="65532" />
                    </span>
                    <span v-else>{{ scope.row.fieldLength }}</span>
                </template>
            </el-table-column>
            <el-table-column label="小数位" prop="decimalDigits">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-input-number size="mini" v-model="scope.row.decimalDigits" controls-position="right" :min="0" :max="65532" />
                    </span>
                    <span v-else>{{ scope.row.decimalDigits }}</span>
                </template>
            </el-table-column>
            <el-table-column label="不为空" prop="notNull">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-switch v-model="scope.row.notNull" active-color="#13ce66" inactive-color="#ff4949" />
                    </span>
                    <span v-else>
                        <el-switch v-model="scope.row.notNull" active-color="#13ce66" inactive-color="#ff4949" disabled/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="orderBy">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-switch v-model="scope.row.orderBy" active-color="#13ce66" inactive-color="#ff4949" />
                    </span>
                    <span v-else>
                        <el-switch v-model="scope.row.orderBy" active-color="#13ce66" inactive-color="#ff4949" disabled/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="值唯一" prop="unique">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-switch v-model="scope.row.unique" active-color="#13ce66" inactive-color="#ff4949" />
                    </span>
                    <span v-else>
                        <el-switch v-model="scope.row.unique" active-color="#13ce66" inactive-color="#ff4949" disabled/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="默认值" prop="defaultValue">
                <template slot-scope="scope">
                    <span v-if="scope.row.uuid == editRowUuid">
                        <el-input v-if="!isBaseObj" size="mini" v-model="scope.row.defaultValue" />
                        <el-select v-if="isBaseObj" size="mini" v-model="scope.row.defaultValue" placeholder="请选择" filterable>
                            <el-option v-for="item in baseObjOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                    <span v-else>{{ scope.row.defaultValue }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div
                        v-if="scope.row.fieldCode != 'uuid' && scope.row.fieldCode != 'create_time' && scope.row.fieldCode != 'update_time' && scope.row.fieldCode != 'del'">
                        <el-tooltip v-if="scope.row.uuid == editRowUuid" content="保存" class="operatingButton">
                            <el-link type="primary" icon="el-icon-success" :underline="false"
                                @click="saveRow(scope.row)">
                            </el-link>
                        </el-tooltip>
                        <el-tooltip v-else content="编辑" class="operatingButton">
                            <el-link type="primary" icon="el-icon-edit-outline" :underline="false"
                                @click="editRow(scope.row)">
                            </el-link>
                        </el-tooltip>
                        <el-tooltip content="删除" class="operatingButton">
                            <el-popconfirm title="是否确认删除这条记录？" confirm-button-text="是" cancel-button-text="否"
                                @confirm="delRow(scope.$index, scope.row.uuid)">
                                <el-link type="danger" icon="el-icon-delete-solid" :underline="false" slot="reference">
                                </el-link>
                            </el-popconfirm>
                        </el-tooltip>
                    </div>
                    <div v-else>
                        <span>不可操作</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top: 10px;" background layout="total, prev, pager, next"
            :page-size="objFieldPageSize" :total="objFieldTotal" @current-change="changeObjFieldPage">
        </el-pagination>
    </div>
</template>
<script>
export default {
    props: ['objCode'],
    data() {
        return {
            fieldTypeOptions: [
                {
                    value: 'varchar',
                    label: '字符串'
                },
                {
                    value: 'int',
                    label: '整数'
                },
                {
                    value: 'bigint',
                    label: '长整数'
                },
                {
                    value: 'decimal',
                    label: '￥ / 小数'
                }, 
                {
                    value: 'datetime',
                    label: '日期时间'
                }, 
                {
                    value: 'tinyint',
                    label: '布尔类型'
                },
                {
                    value: 'text',
                    label: '文本'
                },
                {
                    value: 'longtext',
                    label: '长文本'
                },
                {
                    value: 'base_obj',
                    label: '数据对象'
                }

            ],
            searchItem: [
                {
                    label: "属性名称",
                    value: "fieldName",
                    type: "string",
                },
            ],
            fieldList: [],
            fieldListLoading: false,
            editRowUuid: "",
            objFieldPageNum: 1,
            objFieldPageSize: 5,
            objFieldTotal: 0,
            isBaseObj: false,
            baseObjOptions: []
        }
    },
    mounted() {
        this.list();
        this.getBaseObjOptions();
    },
    methods: {
        changeFieldType(value){
            if(value == "base_obj"){
                this.isBaseObj = true;
            }else{
                this.isBaseObj = false;
            }
        },
        addRow() {
            this.isBaseObj = false;
            let newRow = {
                uuid: "0",
                fieldName: '',
                fieldLength: 0,
                decimalDigits: 0,
                notNull: false,
                primaryKey: false,
                orderBy: false,
                unique: false,
            };
            if (this.editRowUuid != "") {
                this.$confirm('这样做会放弃你之前的修改！', '提示', {
                    confirmButtonText: '确定放弃',
                    cancelButtonText: '我在看看',
                    type: 'warning'
                }).then(() => {
                    if (this.editRowUuid == '0') {
                        this.fieldList.splice(0, 1)
                    }
                    this.fieldList.unshift(newRow)
                    this.editRowUuid = newRow.uuid;
                }).catch(() => {
                    return;
                });
            } else {
                this.fieldList.unshift(newRow)
                this.editRowUuid = newRow.uuid;
            }
        },
        editRow(row) {
            this.isBaseObj = false;
            if (this.editRowUuid != "") {
                this.$confirm('这样做会放弃你之前的修改！', '提示', {
                    confirmButtonText: '确定放弃',
                    cancelButtonText: '我在看看',
                    type: 'warning'
                }).then(() => {
                    if (this.editRowUuid == '0') {
                        this.fieldList.splice(0, 1)
                    }
                    if(row.fieldType == "base_obj"){
                        this.isBaseObj = true;
                    }
                    this.editRowUuid = row.uuid;
                }).catch(() => {
                    return;
                });
            } else {
                if(row.fieldType == "base_obj"){
                    this.isBaseObj = true;
                }
                this.editRowUuid = row.uuid;
            }
        },
        saveRow(row) {
            if(!row.fieldName || !row.fieldCode || !row.fieldType){
                this.$message.warning("字段缺失！")
                return;
            }else if(row.fieldType=='base_obj' && !row.defaultValue){
                this.$message.info("请在默认值处填写要关联的对象编码")
                return;
            }
            row.objCode = this.objCode;
            row.uuid = row.uuid == 0 ? null : row.uuid;
            this.$api.baseObjField.save(row).then(res => {
                if (res.code == 200) {
                    this.editRowUuid = "";
                    this.$message.success(res.msg);
                    this.$refs.search.search(this.$refs.search.param);
                } else {
                    row.uuid = 0
                    this.$message.error(res.msg);
                }
            })
        },
        delRow(index, uuid) {
            if(uuid=='0'){
                this.fieldList.splice(index, 1)
                return;
            }
            this.$api.baseObjField.del({ uuid: uuid }).then(res => {
                if (res.code == 200) {
                    this.fieldList.splice(index, 1)
                    this.$message.success(res.msg);
                    this.$refs.search.search(this.$refs.search.param);
                } else {
                    this.$message.error(res.msg);
                }
            })

        },
        list(param) {
            this.fieldListLoading = true;
            param = param ? param : {};
            param.pageNum = this.objFieldPageNum;
            param.pageSize = this.objFieldPageSize;
            this.fieldList = [];
            this.$api.baseObjField.list(this.objCode, param).then(res => {
                if(res.code==200){
                    this.fieldList = res.data.list;
                    this.objFieldPageNum = res.data.pageNum;
                    this.objFieldTotal = res.data.total;
                }else{
                    this.$message.error(res.msg);
                }
                this.fieldListLoading = false;
            })
        },
        changeObjFieldPage(pageNum) {
            this.objFieldPageNum = pageNum;
            this.$refs.search.search(this.$refs.search.param);
        },
        getBaseObjOptions() {
            let param = {
                pageNum: 1,
                pageSize: 99999,
            }
            this.$api.baseObj.list(param).then(res => {
                if (res.code == 200) {
                    this.baseObjOptions = [];
                    res.data.list.forEach(e =>{
                        this.baseObjOptions.push({
                            value: e.objCode,
                            label: e.objName
                        })
                    })
                }
            })
        },
        // 表头样式
        headStyle() {
            return "text-align:center;background:rgb(248,248,249)";
        },
        // 单元格样式
        rowStyle() {
            return "text-align:center";
        },
    },
}
</script>